<template>
    <div class="getCode">
        <van-nav-bar style="z-index: 999;position: relative;" :placeholder=true fixed title="" left-arrow
            @click-left="$router.go(-1)" />
        <div class="code-info">
            <h2>Hi bro</h2>
            <p class="phone-code">请输入手机号获取验证码</p>
            <van-field type="tel" maxlength="11" v-model="mobile" style="margin-bottom:1rem" label="+86"
                placeholder="请输入手机号" />
            <van-button @click="toGetCode" :disabled="isDisabled" class="codeBtn"
                :style="backgroundStyle">获取验证码</van-button>
        </div>
    </div>
</template>

<script>
import { loginGetCode3 } from '@/apis/login'
export default {
    data() {
        return {
            mobile: ''
        }
    },
    methods: {
        getCode() {

        },
        async toGetCode() {
            const res = await loginGetCode3(this.mobile)
            // this.$axios.get(`score/login/code?mobile=${this.mobile}`).then((res) => {
                if (res.code == 0) {
                    this.$toast.success('发送成功')
                    this.$router.push({
                        path: '/ticketing/inputCode',
                        query: {
                            mobile: this.mobile
                        }
                    })
                } else {
                    this.$toast.fail(res.message);
                }
            // });
        }
    },
    computed: {
        backgroundStyle() {
            if (this.mobile.length === 11) {
                return {
                    background: 'linear-gradient(to bottom, #5297fb, #5141fa)',

                };
            } else {
                return {
                    background: '#363358',
                };
            }
        },
        isDisabled() {
            return this.mobile.length !== 11;
        },
    },
}
</script>

<style lang="less" scoped>
.getCode {
    color: #fff;
    padding: 2rem .2rem;

    ::v-deep .van-cell {
        background: #1f1b31;
        position: inherit;
    }

    ::v-deep .van-field__control {
        color: #fff;
    }

    .code-info {
        font-size: .4rem;

        h2 {
            margin-bottom: .3rem;
        }

        ::v-deep .van-cell__title {
            color: #fff;
        }

        .phone-code {
            margin-bottom: 1rem;
            font-size: .35rem;
        }

        .codeBtn {
            margin: auto;
            width: 95%;
            height: 6vh;
            border-radius: .23rem;
            margin-bottom: .3rem;
            border: none;
        }
    }

}
</style>